<template>
	<view>
		<view class="title">
			<text>我的资料</text>
			<u-icon @click="scanCode" id="scanner" name="scan" size="64"></u-icon>
		</view>
		<view class="avatar-content">
			<u-icon @click="chooseAvatar" color="white" id="avatar-upload" name="camera-fill" size="48"></u-icon>
			<u-avatar id="avatar" shape="circle" :src="avatar" size="176rpx"></u-avatar>
		</view>
		<u-cell-group class="cell-group" :border="false">
			<u-cell title="我的资料" isLink size="large" :border="false" :titleStyle="titleStyles"
				:rightIconStyle="rightIconStyles" url="/pages/account/editprofile/editprofile"></u-cell>
			<u-cell title="修改密码" isLink size="large" :border="false" :titleStyle="titleStyles"
				:rightIconStyle="rightIconStyles" url="/pages/account/changepwd"></u-cell>
			<u-cell title="我的班级" isLink size="large" :border="false" :titleStyle="titleStyles"
				:rightIconStyle="rightIconStyles" url="/pages/myclass/myclass"></u-cell>
			<u-cell title="上传人脸" isLink size="large" :border="false" :titleStyle="titleStyles"
				:rightIconStyle="rightIconStyles" url="/pages/face/facescanner"></u-cell>
			<u-cell title="应用设置" isLink size="large" :border="false" :titleStyle="titleStyles"
				:rightIconStyle="rightIconStyles" url="/pages/account/settings"></u-cell>
		</u-cell-group>
		<view class="footer">
			<u-button class="logoutBtn" @click="clickLogout" text="退出帐号" :disabled="logoutBlocked"></u-button>
		</view>
		<u-tabbar :value="tabIdx" @change="onTabPress" :border=false activeColor="#3d5cff" inactiveColor="#b8b8d2">
			<u-tabbar-item text="首页">
				<u-icon slot="active-icon" size="60" name="home" color="#3d5cff"></u-icon>
				<u-icon slot="inactive-icon" size="60" name="home" color="#b8b8d2"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="考试">
				<u-icon slot="active-icon" size="60" name="bookmark" color="#3d5cff"></u-icon>
				<u-icon slot="inactive-icon" size="60" name="bookmark" color="#b8b8d2"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="我的">
				<u-icon slot="active-icon" size="60" name="account" color="#3d5cff"></u-icon>
				<u-icon slot="inactive-icon" size="60" name="account" color="#b8b8d2"></u-icon>
			</u-tabbar-item>
		</u-tabbar>
		<view>
			<u-modal :show="qrLoginShow" showCancelButton confirmColor="#3d5cff" @cancel="cancelQrLogin"
				@confirm="confirmQrLogin" :asyncClose="true">
				<text>确认登录吗？</text>
				</u-modal>
		</view>
	</view>
</template>

<script>
	var _this = null;
	const api = require('api.js');
	const message = require('message.js');
	export default {
		data() {
			return {
				tabIdx: 2,
				avatar: '',
				titleStyles: {
					'color': '#1f1f39',
					'font-size': '36rpx',
					'font-weight': '800',
					'font-family': 'YouYuan'
				},
				rightIconStyles: {
					'font-size': '40rpx',
					'font-weight': '600',
					'color': '#1f1f39'
				},
				logoutBlocked: false,
				qrLoginShow: false,
				qrLoginCode: ''
			}
		},
		onLoad() {
			_this = this;
			_this.avatar = api.user.avatar;
		},
		methods: {
			scanCode: function() {
				if (!api.isLoggedIn()) {
					return;
				}
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: (res) => {
						var json = JSON.parse(res.result);
						var code = json['code'];
						var type = json['type'];
						api.getSync('/api/user/qrcode/scan/' + code,{}, (res) =>{}, (err)=>{});
						if (type == "login_web") {
							_this.qrLoginCode = code;
							_this.qrLoginShow = true;
						} else if (type == "paper_check_face") {
							uni.navigateTo({
								url: '../face/faceconfirm?code=' + code
							})
						}
					}
				});
			},
			confirmQrLogin: function() {
				api.getSync('/api/user/qrcode/confirm/' + _this.qrLoginCode, {},
					(res) => {
						_this.qrLoginCode = '';
						_this.qrLoginShow = false;
						uni.showToast({
							icon: 'success',
							title: "登录成功",
							duration: 2000
						});
					}, (err) => {
						uni.showToast({
							icon: 'error',
							title: "网络异常",
							duration: 2000
						})
					});
			},
			cancelQrLogin: function() {
				_this.qrLoginShow = false;
			},
			chooseAvatar: function(e) {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (re) => {
						var path = re.tempFilePaths[0];
						api.uploadFile('/api/user/uploadAvatar', path, (res) => {
							var response = JSON.parse(res.data);
							if (response.code == 200 && (response.data != undefined || response
									.data != null)) {
								api.loadUserInfo(
									(user) => {
										_this.avatar = user.avatar;
										uni.showToast({
											icon: 'success',
											title: "上传成功",
											duration: 2000
										});
									}, () => {});
							} else {
								uni.showToast({
									icon: 'error',
									title: "上传失败",
									duration: 2000
								});
							}
							_this.uploading = false;
						}, (error) => {
							uni.showToast({
								icon: 'error',
								title: "上传失败",
								duration: 2000
							});
						});
					}
				})
			},
			clickLogout: function(e) {
				if (_this.logoutBlocked) {
					return;
				}
				_this.logoutBlocked = true;
				uni.showToast({
					icon: 'success',
					title: "退出成功",
					duration: 2000
				});
				api.updateToken('');
				message.clearLocalStorage();
				setTimeout(() => {
					_this.logoutBlocked = false;
					uni.redirectTo({
						url: '../index/index'
					})
				}, 2000);
				api.getSync('/api/user/logout', {}, (res) => {}, (err) => {});
				uni.closeSocket();
			},
			onTabPress: function(idx) {
				if (idx == 0) {
					this.tabIdx = idx;
					uni.redirectTo({
						url: '../index/index'
					});
				} else if (idx == 1) {
					this.tabIdx = idx;
					uni.redirectTo({
						url: '../examlist/examlist'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding-top: calc(var(--status-bar-height) + 60rpx);
		padding-left: 40rpx;
		width: 208rpx;
		height: 68rpx;
		position: relative;

		text {
			position: absolute;
			color: #1f1f39;
			font-size: 48rpx;
			font-weight: 600;
		}

		#scanner {
			position: absolute;
			left: 660rpx;
		}

		#scanner:active {
			background: rgba(0, 0, 0, 0.1);
		}
	}

	.avatar-content {
		position: relative;
		width: 100%;
		height: 300rpx;

		#avatar-upload {
			position: absolute;
			margin-left: 430rpx;
			margin-top: 180rpx;
			z-index: 99;
			width: 48rpx;
			height: 48rpx;
			background: rgba(61, 92, 255, 1);
			border-radius: 50%;
		}

		#avatar {
			position: absolute;
			padding-left: 310rpx;
			padding-right: 310rpx;
			padding-top: 60rpx;
		}
	}

	.footer {
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 180rpx;
	}

	.logoutBtn {
		width: 640rpx;
		border-width: 0;
		border-radius: 20rpx;
		background-color: #3d5cff;
		color: white;
	}
</style>
